import React, { useState } from 'react';
import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import DeptListComponent from './components/DeptListComponent';
import ApprovalFileList from './components/ApprovalFileList';
import { Access, useAccess } from 'umi';
export default () => {
  const [responsive, setResponsive] = useState(false);
  const [selectNode, SetSelectNode] = useState<string>();
  const access = useAccess();
  const getSelectNode = (key: string) => {
    SetSelectNode(key);
  };

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <Access
        key="prents"
        accessible={access.normalButtonFilter('DOCUMENT_APPROVAL:APPROVAL')}
        fallback={<div>无权限</div>}
      >
        <ProCard
          title="审批流程"
          extra="2019年9月28日"
          split={responsive ? 'horizontal' : 'vertical'}
          bordered
          headerBordered
        >
          <ProCard title="审批文件所属系部" colSpan="30%">
            <div style={{ height: 360 }}>
              <DeptListComponent getSelectNode={getSelectNode} />
            </div>
          </ProCard>

          <ProCard>
            <ApprovalFileList selectNode={selectNode} />
          </ProCard>
        </ProCard>
      </Access>
    </RcResizeObserver>
  );
};
